<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '80px',
    }"
  >
    <div class="wrap-btn-group">
      <span class="wrap-btn wrap-go-back" @click="go">返回</span>
    </div>
    <!-- 基本信息 -->
    <div class="wrap-other-roll">
      <el-form label-width="80px" :model="form" size="medium">
        <el-form-item label="标题" required>
          <el-input
            v-model.trim="form.title"
            clearable
            maxlength="30"
            placeholder="请输入标题"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input
            v-model.trim="form.resume"
            clearable
            maxlength="100"
            placeholder="请输入摘要"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input
            v-model.trim="form.author"
            clearable
            maxlength="30"
            placeholder="请输入作者"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="来源">
          <el-input
            v-model.trim="form.source"
            clearable
            maxlength="30"
            placeholder="请输入来源"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="网址">
          <el-input
            v-model.trim="form.linkUrl"
            clearable
            maxlength="100"
            placeholder="请输入网址"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" required>
          <el-select
            clearable
            v-model="form.articleType"
            placeholder="请选择类型"
            style="width: 600px"
          >
            <el-option label="专题" value="1"></el-option>
            <el-option label="新闻" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目" required>
          <el-select
            clearable
            v-model="form.columnId"
            placeholder="请选择栏目"
            style="width: 600px"
          >
            <el-option
              v-for="(item, index) in column"
              :key="index"
              :label="item.columnName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缩略图">
          <web-upload @upload="upload" :size="[620, 400]" accept="image/*" />
          <img :src="form.previewImg" class="img" />
        </el-form-item>
        <el-form-item label="内容" required>
          <wang-editor :content="form.content" @getContent="getContent" />
        </el-form-item>
        <el-form-item style="text-align: end">
          <span class="wrap-btn wrap-primary" @click="save(1)">发布</span>
          <span class="wrap-btn wrap-success" @click="save(0)">保存</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [],
      form: { articleStatus: '0', topFlag: '1' },
    }
  },
  created() {
    this.columnList()
    if (this.$route.query.id) {
      this.itemList()
    }
  },
  methods: {
    go() {
      //返回
      this.$store.dispatch('tags/delVisitedRoute', {
        path: this.$route.path,
      })
      this.$router.push('/portalCenter/news')
    },
    itemList() {
      // 获取列表
      this.$axios
        .get('/admin/portal/article/find?id=' + this.$route.query.id)
        .then((data) => {
          this.form = {}
          if (data.code == 200) {
            this.form = data.data
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    save(approveStatus) {
      //保存
      if (!this.form.title) {
        this.$message.error('请输入标题')
        return
      }
      if (!this.form.articleType) {
        this.$message.error('请选择类型')
        return
      }
      if (!this.form.columnId) {
        this.$message.error('请选择栏目')
        return
      }
      if (!this.form.previewImg && this.form.articleType == 1) {
        this.$message.error('请上传缩略图')
        return
      }
      if (!this.form.content) {
        this.$message.error('请输入内容')
        return
      }
      this.form.approveStatus = approveStatus
      this.$axios.post('/admin/portal/article/add', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.$store.dispatch('tags/delVisitedRoute', {
            path: this.$route.path,
          })
          this.$router.push('/portalCenter/news')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    upload(data) {
      //上传
      this.$set(this.form, 'previewImg', data.fileDomain + data.url)
    },
    getContent(html) {
      this.form.content = html
    },
    columnList() {
      //获取栏目
      this.$axios.get('/admin/portal/column/listColumns').then((data) => {
        this.column = []
        if (data.code == 200) {
          this.column = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style scoped>
.img {
  position: absolute;
  left: 100px;
  top: 0;
  height: 82px;
}
</style>
